<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">
            <i class="fa fa-bar-chart-o fa-fw "></i>
            Graph
            <span>
                >
                Morris Charts
            </span>
        </h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <ul id="sparks" class="">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
    </div>
</div>


<!-- widget grid -->
<section id="widget-grid" class="">

<!-- row -->
<div class="row">

    <!-- NEW WIDGET START -->
    <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        <!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
            <!-- widget options:
            usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

            data-widget-colorbutton="false"
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true"
            data-widget-sortable="false"

            -->
            <header>
                <span class="widget-icon">
                    <i class="fa fa-bar-chart-o"></i>
                </span>
                <h2>Sales Graph</h2>

            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->
                    <input type="text">
                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body no-padding">

                    <div id="sales-graph" class="chart no-padding"></div>

                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>
        <!-- end widget -->

    </article>
    <!-- WIDGET END -->

</div>

<!-- end row -->

<!-- row -->

<!-- row -->
<div class="row">

<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-1" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Area Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="area-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Normal Bar Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="normal-bar-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-5" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Year Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="year-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-7" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Time Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="time-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-9" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>No Grid Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="nogrid-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

</article>
<!-- WIDGET END -->

<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-2" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Bar Graph </h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="bar-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-4" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Stacked Bar Graph </h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="stacked-bar-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-6" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Donut Graph</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="donut-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-8" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Line Graph A </h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="graph-B" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-10" data-widget-editbutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon">
            <i class="fa fa-bar-chart-o"></i>
        </span>
        <h2>Line Graph B </h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div id="non-continu-graph" class="chart no-padding"></div>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

</article>
<!-- WIDGET END -->

</div>

<!-- end row -->

<!-- row -->
<div class="row">

    <!-- NEW WIDGET START -->
    <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        <!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget" id="wid-id-11" data-widget-editbutton="false">
            <!-- widget options:
            usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

            data-widget-colorbutton="false"
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true"
            data-widget-sortable="false"

            -->
            <header>
                <span class="widget-icon">
                    <i class="fa fa-bar-chart-o"></i>
                </span>
                <h2>Line Graph C</h2>

            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->

                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body no-padding">

                    <div id="non-date-graph" class="chart no-padding"></div>

                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>
        <!-- end widget -->

    </article>
    <!-- WIDGET END -->

</div>

<!-- end row -->

</section>
<!-- end widget grid -->
@section Scripts {
    <script type="text/javascript">

        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        // PAGE RELATED SCRIPTS

        // pagefunction

        var pagefunction = function() {

            // sales graph
            if ($('#sales-graph').length) {

                Morris.Area({
                    element: 'sales-graph',
                    data: [
                        {
                            period: '2010 Q1',
                            iphone: 2666,
                            ipad: null,
                            itouch: 2647
                        }, {
                            period: '2010 Q2',
                            iphone: 2778,
                            ipad: 2294,
                            itouch: 2441
                        }, {
                            period: '2010 Q3',
                            iphone: 4912,
                            ipad: 1969,
                            itouch: 2501
                        }, {
                            period: '2010 Q4',
                            iphone: 3767,
                            ipad: 3597,
                            itouch: 5689
                        }, {
                            period: '2011 Q1',
                            iphone: 6810,
                            ipad: 1914,
                            itouch: 2293
                        }, {
                            period: '2011 Q2',
                            iphone: 5670,
                            ipad: 4293,
                            itouch: 1881
                        }, {
                            period: '2011 Q3',
                            iphone: 4820,
                            ipad: 3795,
                            itouch: 1588
                        }, {
                            period: '2011 Q4',
                            iphone: 15073,
                            ipad: 5967,
                            itouch: 5175
                        }, {
                            period: '2012 Q1',
                            iphone: 10687,
                            ipad: 4460,
                            itouch: 2028
                        }, {
                            period: '2012 Q2',
                            iphone: 8432,
                            ipad: 5713,
                            itouch: 1791
                        }
                    ],
                    xkey: 'period',
                    ykeys: ['iphone', 'ipad', 'itouch'],
                    labels: ['iPhone', 'iPad', 'iPod Touch'],
                    pointSize: 2,
                    hideHover: 'auto'
                });

            }

            // area graph
            if ($('#area-graph').length) {
                Morris.Area({
                    element: 'area-graph',
                    data: [
                        { x: '2011 Q1', y: 3, z: 3 },
                        { x: '2011 Q2', y: 2, z: 0 },
                        { x: '2011 Q3', y: 0, z: 2 },
                        { x: '2011 Q4', y: 4, z: 4 }
                    ],
                    xkey: 'x',
                    ykeys: ['y', 'z'],
                    labels: ['Y', 'Z']
                });
            }

            // bar graph color
            if ($('#bar-graph').length) {

                Morris.Bar({
                    element: 'bar-graph',
                    data: [
                        { x: '2011 Q1', y: 0 },
                        { x: '2011 Q2', y: 1 },
                        { x: '2011 Q3', y: 2 },
                        { x: '2011 Q4', y: 3 },
                        { x: '2012 Q1', y: 4 },
                        { x: '2012 Q2', y: 5 },
                        { x: '2012 Q3', y: 6 },
                        { x: '2012 Q4', y: 7 },
                        { x: '2013 Q1', y: 8 }
                    ],
                    xkey: 'x',
                    ykeys: ['y'],
                    labels: ['Y'],
                    barColors: function(row, series, type) {
                        if (type === 'bar') {
                            var red = Math.ceil(150 * row.y / this.ymax);
                            return 'rgb(' + red + ',0,0)';
                        } else {
                            return '#000';
                        }
                    }
                });

            }

            // Use Morris.Bar
            if ($('#normal-bar-graph').length) {

                Morris.Bar({
                    element: 'normal-bar-graph',
                    data: [
                        { x: '2011 Q1', y: 3, z: 2, a: 3 },
                        { x: '2011 Q2', y: 2, z: null, a: 1 },
                        { x: '2011 Q3', y: 0, z: 2, a: 4 },
                        { x: '2011 Q4', y: 2, z: 4, a: 3 }
                    ],
                    xkey: 'x',
                    ykeys: ['y', 'z', 'a'],
                    labels: ['Y', 'Z', 'A']
                });

            }

            // Use Morris.Bar 2
            if ($('#noline-bar-graph').length) {
                Morris.Bar({
                    element: 'noline-bar-graph',
                    axes: false,
                    data: [
                        { x: '2011 Q1', y: 3, z: 2, a: 3 },
                        { x: '2011 Q2', y: 2, z: null, a: 1 },
                        { x: '2011 Q3', y: 0, z: 2, a: 4 },
                        { x: '2011 Q4', y: 2, z: 4, a: 3 }
                    ],
                    xkey: 'x',
                    ykeys: ['y', 'z', 'a'],
                    labels: ['Y', 'Z', 'A']
                });
            }

            /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
            if ($('#year-graph').length) {
                var day_data = [
                    { "period": "2012-10-01", "licensed": 3407, "sorned": 660 },
                    { "period": "2012-09-30", "licensed": 3351, "sorned": 629 },
                    { "period": "2012-09-29", "licensed": 3269, "sorned": 618 },
                    { "period": "2012-09-20", "licensed": 3246, "sorned": 661 },
                    { "period": "2012-09-19", "licensed": 3257, "sorned": 667 },
                    { "period": "2012-09-18", "licensed": 3248, "sorned": 627 },
                    { "period": "2012-09-17", "licensed": 3171, "sorned": 660 },
                    { "period": "2012-09-16", "licensed": 3171, "sorned": 676 },
                    { "period": "2012-09-15", "licensed": 3201, "sorned": 656 },
                    { "period": "2012-09-10", "licensed": 3215, "sorned": 622 }
                ];
                Morris.Line({
                    element: 'year-graph',
                    data: day_data,
                    xkey: 'period',
                    ykeys: ['licensed', 'sorned'],
                    labels: ['Licensed', 'SORN']
                });
            }

            // decimal data
            if ($('#decimal-graph').length) {
                var decimal_data = [];
                for (var x = 0; x <= 360; x += 10) {
                    decimal_data.push({
                        x: x,
                        y: Math.sin(Math.PI * x / 180).toFixed(4)
                    });
                }
                window.m = Morris.Line({
                    element: 'decimal-graph',
                    data: decimal_data,
                    xkey: 'x',
                    ykeys: ['y'],
                    labels: ['sin(x)'],
                    parseTime: false,
                    hoverCallback: function(index, options) {
                        var row = options.data[index];
                        return "sin(" + row.x + ") = " + row.y;
                    },
                    xLabelMargin: 10
                });
            }

            // donut
            if ($('#donut-graph').length) {
                Morris.Donut({
                    element: 'donut-graph',
                    data: [
                        { value: 70, label: 'foo' },
                        { value: 15, label: 'bar' },
                        { value: 10, label: 'baz' },
                        { value: 5, label: 'A really really long label' }
                    ],
                    formatter: function(x) { return x + "%" }
                });
            }

            // time formatter
            if ($('#time-graph').length) {
                var week_data = [
                    { "period": "2011 W27", "licensed": 3407, "sorned": 660 },
                    { "period": "2011 W26", "licensed": 3351, "sorned": 629 },
                    { "period": "2011 W25", "licensed": 3269, "sorned": 618 },
                    { "period": "2011 W24", "licensed": 3246, "sorned": 661 },
                    { "period": "2011 W23", "licensed": 3257, "sorned": 667 },
                    { "period": "2011 W22", "licensed": 3248, "sorned": 627 },
                    { "period": "2011 W21", "licensed": 3171, "sorned": 660 },
                    { "period": "2011 W20", "licensed": 3171, "sorned": 676 },
                    { "period": "2011 W19", "licensed": 3201, "sorned": 656 },
                    { "period": "2011 W18", "licensed": 3215, "sorned": 622 },
                    { "period": "2011 W17", "licensed": 3148, "sorned": 632 },
                    { "period": "2011 W16", "licensed": 3155, "sorned": 681 },
                    { "period": "2011 W15", "licensed": 3190, "sorned": 667 },
                    { "period": "2011 W14", "licensed": 3226, "sorned": 620 },
                    { "period": "2011 W13", "licensed": 3245, "sorned": null },
                    { "period": "2011 W12", "licensed": 3289, "sorned": null },
                    { "period": "2011 W11", "licensed": 3263, "sorned": null },
                    { "period": "2011 W10", "licensed": 3189, "sorned": null },
                    { "period": "2011 W09", "licensed": 3079, "sorned": null },
                    { "period": "2011 W08", "licensed": 3085, "sorned": null },
                    { "period": "2011 W07", "licensed": 3055, "sorned": null },
                    { "period": "2011 W06", "licensed": 3063, "sorned": null },
                    { "period": "2011 W05", "licensed": 2943, "sorned": null },
                    { "period": "2011 W04", "licensed": 2806, "sorned": null },
                    { "period": "2011 W03", "licensed": 2674, "sorned": null },
                    { "period": "2011 W02", "licensed": 1702, "sorned": null },
                    { "period": "2011 W01", "licensed": 1732, "sorned": null }
                ];
                Morris.Line({
                    element: 'time-graph',
                    data: week_data,
                    xkey: 'period',
                    ykeys: ['licensed', 'sorned'],
                    labels: ['Licensed', 'SORN'],
                    events: [
                        '2011-04',
                        '2011-08'
                    ]
                });
            }

            // negative value
            if ($('#graph-B').length) {
                var neg_data = [
                    { "period": "2011-08-12", "a": 100 },
                    { "period": "2011-03-03", "a": 75 },
                    { "period": "2010-08-08", "a": 50 },
                    { "period": "2010-05-10", "a": 25 },
                    { "period": "2010-03-14", "a": 0 },
                    { "period": "2010-01-10", "a": -25 },
                    { "period": "2009-12-10", "a": -50 },
                    { "period": "2009-10-07", "a": -75 },
                    { "period": "2009-09-25", "a": -100 }
                ];
                Morris.Line({
                    element: 'graph-B',
                    data: neg_data,
                    xkey: 'period',
                    ykeys: ['a'],
                    labels: ['Series A'],
                    units: '%'
                });
            }

            // no grid
            /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
            if ($('#nogrid-graph').length) {
                var day_data = [
                    { "period": "2012-10-01", "licensed": 3407, "sorned": 660 },
                    { "period": "2012-09-30", "licensed": 3351, "sorned": 629 },
                    { "period": "2012-09-29", "licensed": 3269, "sorned": 618 },
                    { "period": "2012-09-20", "licensed": 3246, "sorned": 661 },
                    { "period": "2012-09-19", "licensed": 3257, "sorned": 667 },
                    { "period": "2012-09-18", "licensed": 3248, "sorned": 627 },
                    { "period": "2012-09-17", "licensed": 3171, "sorned": 660 },
                    { "period": "2012-09-16", "licensed": 3171, "sorned": 676 },
                    { "period": "2012-09-15", "licensed": 3201, "sorned": 656 },
                    { "period": "2012-09-10", "licensed": 3215, "sorned": 622 }
                ];
                Morris.Line({
                    element: 'nogrid-graph',
                    grid: false,
                    data: day_data,
                    xkey: 'period',
                    ykeys: ['licensed', 'sorned'],
                    labels: ['Licensed', 'SORN']
                });
            }

            // non-continus data
            /* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
            if ($('#non-continu-graph').length) {
                var day_data = [
                    { "period": "2012-10-01", "licensed": 3407 },
                    { "period": "2012-09-30", "sorned": 0 },
                    { "period": "2012-09-29", "sorned": 618 },
                    { "period": "2012-09-20", "licensed": 3246, "sorned": 661 },
                    { "period": "2012-09-19", "licensed": 3257, "sorned": null },
                    { "period": "2012-09-18", "licensed": 3248, "other": 1000 },
                    { "period": "2012-09-17", "sorned": 0 },
                    { "period": "2012-09-16", "sorned": 0 },
                    { "period": "2012-09-15", "licensed": 3201, "sorned": 656 },
                    { "period": "2012-09-10", "licensed": 3215 }
                ];
                Morris.Line({
                    element: 'non-continu-graph',
                    data: day_data,
                    xkey: 'period',
                    ykeys: ['licensed', 'sorned', 'other'],
                    labels: ['Licensed', 'SORN', 'Other'],
                    /* custom label formatting with `xLabelFormat` */
                    xLabelFormat: function(d) {
                        return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
                    },
                    /* setting `xLabels` is recommended when using xLabelFormat */
                    xLabels: 'day'
                });
            }

            // non date data
            if ($('#non-date-graph').length) {
                var day_data = [
                    { "elapsed": "I", "value": 34 },
                    { "elapsed": "II", "value": 24 },
                    { "elapsed": "III", "value": 3 },
                    { "elapsed": "IV", "value": 12 },
                    { "elapsed": "V", "value": 13 },
                    { "elapsed": "VI", "value": 22 },
                    { "elapsed": "VII", "value": 5 },
                    { "elapsed": "VIII", "value": 26 },
                    { "elapsed": "IX", "value": 12 },
                    { "elapsed": "X", "value": 19 }
                ];
                Morris.Line({
                    element: 'non-date-graph',
                    data: day_data,
                    xkey: 'elapsed',
                    ykeys: ['value'],
                    labels: ['value'],
                    parseTime: false
                });
            }

            //stacked bar
            if ($('#stacked-bar-graph').length) {
                Morris.Bar({
                    element: 'stacked-bar-graph',
                    axes: false,
                    grid: false,
                    data: [
                        { x: '2011 Q1', y: 3, z: 2, a: 3 },
                        { x: '2011 Q2', y: 2, z: null, a: 1 },
                        { x: '2011 Q3', y: 0, z: 2, a: 4 },
                        { x: '2011 Q4', y: 2, z: 4, a: 3 }
                    ],
                    xkey: 'x',
                    ykeys: ['y', 'z', 'a'],
                    labels: ['Y', 'Z', 'A'],
                    stacked: true
                });
            }

            // interval 
            if ($('#interval-graph').length) {

                var nReloads = 0;

                function data(offset) {
                    var ret = [];
                    for (var x = 0; x <= 360; x += 10) {
                        var v = (offset + x) % 360;
                        ret.push({
                            x: x,
                            y: Math.sin(Math.PI * v / 180).toFixed(4),
                            z: Math.cos(Math.PI * v / 180).toFixed(4)
                        });
                    }
                    return ret;
                }

                var graph = Morris.Line({
                    element: 'interval-graph',
                    data: data(0),
                    xkey: 'x',
                    ykeys: ['y', 'z'],
                    labels: ['sin()', 'cos()'],
                    parseTime: false,
                    ymin: -1.0,
                    ymax: 1.0,
                    hideHover: true
                });

                function update() {
                    nReloads++;
                    graph.setData(data(5 * nReloads));
                    $('#reloadStatus').text(nReloads + ' reloads');
                }

                setInterval(update, 100);
            }


        };

        // end pagefunction

        // Load morris dependencies and run pagefunction
        loadScript("/js/plugin/morris/raphael.min.js",
            function() {
                loadScript("/js/plugin/morris/morris.min.js", pagefunction);
            });


    </script>
}
